{% extends "base.html" %}

{% block title %}个人中心 - 智能竞赛信息平台{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/profile.css') }}">
<div class="content-area">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1 class="page-title">个人中心</h1>
        <p class="page-subtitle">管理您的个人信息和竞赛记录</p>
    </div>

    <div class="profile-container">
        <!-- 个人信息卡片 -->
        <div class="profile-card">
            <div class="profile-header">
                <h2 class="card-title">基本信息</h2>
                <button id="editProfileBtn" class="edit-btn">
                    <iconify-icon icon="material-symbols:edit" width="16"></iconify-icon>
                    编辑
                </button>
            </div>

            <div class="avatar-section">
                <div class="avatar-container">
                    {% if user.avatar_url %}
                        <img src="{{ url_for('static', filename=user.avatar_url) }}" 
                             alt="{{ user.name }}" class="avatar-image">
                    {% else %}
                        <div class="avatar-placeholder">
                            <iconify-icon icon="healthicons:ui-user-profile" width="48"></iconify-icon>
                        </div>
                    {% endif %}
                    <div class="avatar-overlay">
                        <label for="avatarInput" class="avatar-upload-btn">
                            <iconify-icon icon="material-symbols:camera-alt" width="20"></iconify-icon>
                        </label>
                        <input type="file" id="avatarInput" accept="image/*" style="display: none;">
                    </div>
                </div>
                
                <div class="avatar-info">
                    <h3 class="user-name">{{ user.name }}</h3>
                    <p class="user-role">学生</p>
                </div>
            </div>

            <div class="info-form" id="infoForm">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">学号</label>
                        <input type="text" class="form-input" value="{{ user.student_id }}" readonly>
                    </div>
                    <div class="form-group">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-input" id="nameInput" value="{{ user.name }}" readonly>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">学院</label>
                        <select class="form-input" id="collegeInput" disabled></select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">专业</label>
                        <select class="form-input" id="majorInput" disabled></select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input type="text" class="form-input" id="phoneInput" value="{{ user.phone }}" readonly>
                </div>

                <div class="form-group">
                    <label class="form-label">年级</label>
                    <input type="number" class="form-input" id="gradeInput" value="{{ user.grade }}" min="2020" max="2030" readonly>
                </div>

                <div class="form-group">
                    <label class="form-label">自我介绍</label>
                    <textarea class="form-input" id="profileInput" rows="4" placeholder="请简单介绍一下自己，包括学习经历、兴趣爱好、技能特长等..." readonly>{{ user.profile or '' }}</textarea>
                </div>

                <div class="form-actions">
                    <button id="saveProfileBtn" class="save-btn" style="display: none;">
                        <iconify-icon icon="material-symbols:save" width="16"></iconify-icon>
                        保存
                    </button>
                    <button id="cancelEditBtn" class="cancel-btn" style="display: none;">
                        取消
                    </button>
                </div>
            </div>
        </div>

        <!-- 竞赛记录卡片 -->
        <div class="profile-card">
            <div class="profile-header">
                <h2 class="card-title">竞赛记录</h2>
                <button class="view-all-btn">查看全部</button>
            </div>
            
            <div class="competition-stats">
                <div class="stat-item">
                    <div class="stat-number">12</div>
                    <div class="stat-label">参与竞赛</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">5</div>
                    <div class="stat-label">获奖次数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">3</div>
                    <div class="stat-label">一等奖</div>
                </div>
            </div>

            <div class="recent-competitions">
                <h3 class="section-title">最近参与</h3>
                <div class="competition-list">
                    <div class="competition-item">
                        <div class="competition-info">
                            <h4 class="competition-name">全国大学生数学建模竞赛</h4>
                            <p class="competition-date">2024年9月</p>
                        </div>
                        <div class="competition-result">
                            <span class="result-badge winner">一等奖</span>
                        </div>
                    </div>
                    <div class="competition-item">
                        <div class="competition-info">
                            <h4 class="competition-name">互联网+创新创业大赛</h4>
                            <p class="competition-date">2024年6月</p>
                        </div>
                        <div class="competition-result">
                            <span class="result-badge runner-up">二等奖</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 简历上传卡片 -->
        <div class="profile-card">
            <div class="profile-header">
                <h2 class="card-title">简历管理</h2>
            </div>
            
            <div class="resume-section">
                <div class="upload-area" id="resumeUpload">
                    <div class="upload-icon">
                        <iconify-icon icon="material-symbols:upload-file" width="48"></iconify-icon>
                    </div>
                    <div class="upload-text">
                        <p>拖放文件或<span class="upload-link">点击上传</span></p>
                        <p class="upload-hint">支持 PDF 格式，最大 10MB</p>
                    </div>
                    <input type="file" id="resumeInput" accept=".pdf" style="display: none;">
                </div>
                
                <div class="resume-info" id="resumeInfo" style="display: none;">
                    <div class="resume-header">
                        <div class="resume-file">
                            <iconify-icon icon="material-symbols:description" width="24"></iconify-icon>
                            <span class="file-name" id="fileName">resume.pdf</span>
                        </div>
                        <button class="delete-resume-btn" id="removeResume" title="点击删除当前简历文件">
                            删除
                        </button>
                    </div>
                    <p class="file-size">文件大小: <span id="fileSize">2.5 MB</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 个人中心：院系/专业联动与保存逻辑（页面内联） -->
<script>
    (function() {
        // 注入的学院专业信息
        const COLLEGE_INFO = JSON.parse('{{ college_info|tojson|safe }}');
        const collegeSelect = document.getElementById('collegeInput');
        const majorSelect = document.getElementById('majorInput');
        const editBtn = document.getElementById('editProfileBtn');
        const saveBtn = document.getElementById('saveProfileBtn');
        const cancelBtn = document.getElementById('cancelEditBtn');
        const nameInput = document.getElementById('nameInput');
        const phoneInput = document.getElementById('phoneInput');
        const gradeInput = document.getElementById('gradeInput');
        const profileInput = document.getElementById('profileInput');

        const currentCollege = '{{ user.college or "" }}';
        const currentMajor = '{{ user.major or "" }}';

        function initColleges() {
            collegeSelect.innerHTML = '';
            const colleges = Object.keys(COLLEGE_INFO || {});
            for (const c of colleges) {
                const opt = document.createElement('option');
                opt.value = c;
                opt.textContent = c;
                opt.title = c; // 添加title属性，鼠标悬停时显示完整文本
                if (c === currentCollege) opt.selected = true;
                collegeSelect.appendChild(opt);
            }
            if (!colleges.length) {
                const opt = document.createElement('option');
                opt.value = '';
                opt.textContent = '暂无学院数据';
                collegeSelect.appendChild(opt);
            }
        }

        function renderMajors(college, selectedMajor) {
            majorSelect.innerHTML = '';
            const majors = (COLLEGE_INFO && COLLEGE_INFO[college]) ? COLLEGE_INFO[college] : [];
            if (majors.length) {
                for (const m of majors) {
                    const opt = document.createElement('option');
                    opt.value = m;
                    opt.textContent = m;
                    opt.title = m; // 添加title属性，鼠标悬停时显示完整文本
                    if (m === selectedMajor) opt.selected = true;
                    majorSelect.appendChild(opt);
                }
            } else {
                const opt = document.createElement('option');
                opt.value = '';
                opt.textContent = '请选择学院后显示专业';
                majorSelect.appendChild(opt);
            }
        }

        function setEditable(editable) {
            const method = editable ? 'removeAttribute' : 'setAttribute';
            collegeSelect[method]('disabled', editable ? null : '');
            majorSelect[method]('disabled', editable ? null : '');
            nameInput.readOnly = !editable;
            phoneInput.readOnly = !editable;
            gradeInput.readOnly = !editable;
            profileInput.readOnly = !editable;
            saveBtn.style.display = editable ? '' : 'none';
            cancelBtn.style.display = editable ? '' : 'none';
        }

        initColleges();
        renderMajors(currentCollege || collegeSelect.value, currentMajor);

        collegeSelect.addEventListener('change', () => renderMajors(collegeSelect.value, ''));

        editBtn.addEventListener('click', function() {
            setEditable(true);
        });

        cancelBtn.addEventListener('click', function() {
            // 恢复原值
            initColleges();
            renderMajors(currentCollege || collegeSelect.value, currentMajor);
            setEditable(false);
        });

        saveBtn.addEventListener('click', function() {
            const payload = {
                name: nameInput.value.trim(),
                phone: phoneInput.value.trim(),
                college: collegeSelect.value,
                major: majorSelect.value,
                profile: profileInput.value
            };
            fetch('/api/user/update', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    setEditable(false);
                } else {
                    alert(data.message || '保存失败');
                }
            })
            .catch(() => alert('保存失败'))
        });
    })();
</script>
<!-- 个人中心通用交互逻辑（分离脚本） -->
<script src="{{ url_for('static', filename='js/profile.js') }}" defer></script>
{% endblock %}